<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '消息',
    enablePullDownRefresh: false,
  },
}
</route>
<template>
  <view>
    <view class="mt-5 mx-4 text-[#7E848F] text-xs">
      <k-list :is-empty="!messageList.length" :loading="loading">
        <view
          class="flex py-4 border-b border-b-solid border-[#EDEDED]"
          v-for="(item, index) in messageList"
          :key="item.id"
          @click="to(`pages-sub/person/message-detail?id=${item.id}`)"
        >
          <wd-img
            width="90rpx"
            height="90rpx"
            :src="!item.read ? '/static/images/msg_light.png' : '/static/images/msg_dark.png'"
          ></wd-img>
          <view class="ml-4 flex-1">
            <view class="flex justify-between items-center">
              <text class="flex-1 text-#0A0A0A text-[32rpx] line-clamp-1">{{ item.name }}</text>
              <text class="">{{ formatTime(item.publish_time) }}</text>
            </view>
            <view class="flex justify-between items-center mt-[10rpx]">
              <text class="line-clamp-1">
                <uv-parse :nodes="filterMediaTag(item.content)"></uv-parse>
              </text>
              <i v-if="!item.read" class="bg-[#FF5151] w-2 h-2 rounded-1/2"></i>
            </view>
          </view>
        </view>
      </k-list>
    </view>
  </view>
</template>

<script setup>
import dayjs from 'dayjs'
import { to } from '@/utils/navigation'
import useReachBottomLoadMore from '@/hooks/useReachBottomLoadMore'
import { fetchMessageList } from '@/service/message'
import { filterMediaTag } from '@/utils/format'
const { data: messageList, loading, refresh } = useReachBottomLoadMore(fetchMessageList)

onShow(() => {
  refresh()
})

const formatTime = (time) => {
  return dayjs(time).format('MM-DD')
}
</script>

<style lang="scss" scoped></style>
